<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>订单列表</title>
		<!-- 引入layui的样式 -->
		<link href="//unpkg.com/layui@2.9.16/dist/css/layui.css" rel="stylesheet">
		<style>
			.bottom {
				background-color: #ececec;
				text-align: center;
				height: 40px;
				line-height: 40px;
				position: fixed;
				bottom: 0px;
				width: 100%;
			}

			.con {
				background-color: #e60012;
			}

			.top .tit {
				padding: 15px;
				border-radius: 20px 20px 0px 0px;
				background-color: white;
				margin-top: 10px;
				border-bottom: 1px solid #e2e2e2;
			}

			body {
				background-color: #F1F3F7;
			}

			.top .tit p {
				margin-top: 5px;
			}

			.tit p {
				color: #666;
				font-size: 12px;
			}

			.middle {
				padding: 10px;
			}

			.slogen {
				line-height: 20px;
				color: yellow;
				font-weight: 600;
				padding-left: 30px;
				padding-top: 20px;
			}

			.middle img {
				width: 25%;
				border: 1px solid #F1F3F7;
				border-radius: 5px;
			}

			.order {
				background-color: white;
				border-radius: 10px;
				margin-bottom: 10px;
				padding: 10px;
			}

			.orderTime {
				font-size: 12px;
				color: #999;
				line-height: 30px;
			}

			.orderBtnGroup {
				text-align: right;
			}

			.orderId {
				color: red;
				text-align: right;
			}

			.orderId span {
				font-size: 18px;
				font-weight: 800;
			}

			.proNum {
				color: #999;
				text-align: right;
				margin-top: 40px;
			}

			.total span {
				font-size: 18px;
				font-weight: 800;
			}
		</style>
	</head>
	<body>
		<!-- 头部 -->
		<div class="con">
			<p class="slogen">就爱这块 正新鸡排</p>
			<div class="layui-row top ">
				<div class="tit">
					全部订单
				</div>
			</div>
		</div>

		<!-- 中间：产品列表 -->
		<div class="middle" id="orders">
			<!-- 单个产品 -->
			<!-- <div class="layui-row order">
				<div class="layui-col-xs8">
					<h3 class="total">￥<span>15.00</span></h3>
					<p class="orderTime">2024-09-22 19:08:39</p>
					<div>
						<ul>
							<li><img src="img/mmexport1726038225850.jpg" alt="">全家桶 10元x1 </li>
							<li><img src="img/mmexport1726038243687.jpg" alt="">鸡翅 5元x2 </li>
						</ul>
					</div>
				</div>
				<div class="layui-col-xs4">
					<p class="orderId">取餐号 <span>239</span></p>
				</div>
				<div class="layui-col-xs12 orderBtnGroup">
					<button class="layui-btn layui-btn-primary layui-border-red layui-btn-sm layui-btn-radius">再来一单</button>
				</div>
			</div> -->
			<!-- 单个产品结束 -->
			
		
		</div>



		<!-- 底部菜单 -->
		<div class="layui-row bottom">
			<div class="layui-col-xs6">
				<div class="grid-demo grid-demo-bg1">
					<i class="layui-icon layui-icon-survey" style="font-size: 30px; color: #e60012;"></i>
					<a href="index.html">点餐</a>
				</div>
			</div>
			<div class="layui-col-xs6">
				<div class="grid-demo">
					<i class="layui-icon layui-icon-user" style="font-size: 30px; color: #e60012;"></i>
					订单
				</div>
			</div>
		</div>
		<!-- 标签结束 -->




		<!-- 脚本开始 -->
		<!-- 引入layui的脚本-->
		<script src="//unpkg.com/layui@2.9.16/dist/layui.js"></script>
		<script>
			layui.use(function() {
				var $ = layui.$;
				var form = layui.form;



				/* ----------- */
				//发请求，获取订单列表
				$.get("/ordered/getListAndDetail", function(res) {
					console.log(res)
					for (let item of res.data) {
						var s = `<div class="layui-row order">
									<div class="layui-col-xs8">
										<h3 class="total">￥<span>${item.total}</span></h3>
										<p class="orderTime">${item.orderTime}</p>
										<div>
											<ul>`
												
									for(let d of item.orderDetails){
										s += `<li><img src="/showPic/${d.proImg}" alt="">${d.proName} ${d.proPrice}元 x ${d.num} </li>`
									}
									
											
									s+=	`</ul>
										</div>
									</div>
									<div class="layui-col-xs4">
										<p class="orderId">取餐号 <span>${item.id}</span></p>
									</div>
									<div class="layui-col-xs12 orderBtnGroup">
										<button class="layui-btn layui-btn-primary layui-border-red layui-btn-sm layui-btn-radius">再来一单</button>
									</div>
								</div>`;
						$("#orders").append(s)
					}
				}, "json")
				







			})
		</script>
	</body>
</html>